<template>
  <div>
    <van-cell title="全部评论"></van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <CommentItem
        v-for="(item, i) in list"
        :key="i"
        :obj="item"
        @replayPupShow="replayPupShow"
        :showLabel="showLabel"
        @likeCli="likeCli"
      />
    </van-list>
  </div>
</template>

<script>
import CommentItem from '@/components/comment-item.vue'
import { getCommend } from '@/api/commend'
export default {
  name: 'CommendList',
  props: {
    // 文章或者评论id
    artId: {
      type: [String, Number, Object],
      required: true
    },
    // 判断是文章评论还是回复
    type: {
      type: String,
      default: 'a'
    },
    // 评论列表
    list: {
      type: Array,
      default: () => []
    },
    showLabel: {
      type: Boolean,
      default: true
    }
  },
  components: {
    CommentItem
  },
  data () {
    return {
      loading: false,
      finished: false,
      offset: null,
      limit: 10
    }
  },
  created () {
    // 为了评论数量能立刻加载所以要手动调用
    this.loading = true
    this.onLoad()
  },
  methods: {
    async onLoad () {
      const { data } = await getCommend({
        type: this.type,
        source: this.artId.toString(),
        offset: this.offset,
        limit: this.limit
      })
      this.$emit('addCommentList', data.results)
      if (this.list.length < data.total_count) {
        this.offset = data.last_id
        this.loading = false
      } else {
        this.finished = true
      }
      this.$emit('tranData', data.total_count)
    },
    // 评论列表item给爷爷传递当前数据
    replayPupShow (obj) {
      this.$emit('replayPupShow', obj)
    },
    likeCli (id) {
      this.$emit('likeCli', id)
    }
  }
}
</script>

<style></style>
